<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现不定高展开收起过渡效果</title>
    <style>
        li {
            width: 300px;
            height: 50px;
            line-height: 50px;
            background: #ccc;
            border-bottom: 1px solid #fff;
            text-align: center;
            list-style: none;
        }

        ul {
            transition: height .3s;
            overflow: hidden;
        }
    </style>
</head>
<body>
<button>switch</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    let ul = document.getElementsByTagName("ul")[0];
    let ulHeight = ul.offsetHeight;

    ul.style.height = 0;
    document.getElementsByTagName("button")[0].onclick = function() {
        if (ul.offsetHeight === 0) {
            ul.style.height = ulHeight + "px";
        } else {
            ul.style.height = 0;
        }
    }
</script>
</body>
</html>